<script>
export default {
  name: 'ShopRow',
  props: {
    row: {
      type: Object,
      default: () => ({})
    },
    relevanceRow: {
      type: Object,
      default: undefined
    },
    childRender: {
      type: Function,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  render(h) {
    const { row, relevanceRow } = this
    const children = [
      h('div', {
        class: 'column cell cell1'
      }, row.fieldName),
      h('div', {
        class: 'column cell cell2'
      }, [h('el-switch', {
        props: {
          value: row.isChange,
          activeValue: 1,
          inactiveValue: 0,
          disabled: this.disabled
        },
        on: {
          input: v => {
            this.$set(row, 'isChange', v)
            relevanceRow && this.$set(relevanceRow, 'isChange', v)
            if (![1, '1'].includes(v)) {
              this.$set(row, 'afterValue', '')
              relevanceRow && this.$set(relevanceRow, 'afterValue', '')
              this.$set(row, 'reason', '')
              relevanceRow && this.$set(relevanceRow, 'reason', '')
            }
          }
        }
      })]),
      h('div', {
        class: 'column cell cell3'
      }, relevanceRow ? relevanceRow.beforeValue : row.beforeValue),
      h('div', {
        class: 'column cell cell4'
      }, this.editable ? [this.childRender(h, row, relevanceRow)] : relevanceRow ? relevanceRow.afterValue : row.afterValue),
      h('div', {
        class: 'column cell cell5'
      }, row.fieldCode === 'cityLevel' ? (this.editable ? [h('el-input', {
        props: {
          value: row.reason,
          type: 'textarea',
          autosize: { minRows: 1 },
          placeholder: '请输入',
          maxlength: 255,
          disabled: this.disabled || ![1, '1'].includes(row.isChange)
        },
        attrs: {
          maxlength: 255,
          placeholder: '变更原因'
        },
        on: {
          input: v => {
            this.$set(row, 'reason', v)
            relevanceRow && this.$set(relevanceRow, 'reason', v)
          }
        }
      })] : row.reason) : [])
    ]
    return h('div', {
      class: 'row'
    }, children)
  }
}
</script>
<style lang="scss" scoped>
.row{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #dcdfe6;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    .column{
      }
      .cell{
        display: flex;
        align-items: center;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
      }
      .cell1{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell2{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell3{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell4{
        max-width: 20%;
        flex: 0 0 20%;
        overflow: hidden;
      }
      .cell5{
        max-width: 20%;
        flex: 0 0 20%;
        overflow: hidden;
      }
      .cell+.cell{
        border-left: 1px solid #dcdfe6;
      }
  }
  .row+.row{
    border-top-color: transparent;
    border-top-width: 0;
  }
</style>
